<template>
  <input
    type="text"
    v-model="todoTitle"
    @keyup.enter="addTodo"
    placeholder="请输入任务标题"
  />
  <button @click="addTodo">新增任务</button>
  <hr />
  <h2>   
    正在进行   <span>{{ activeLen }}</span>
  </h2>
  <ul v-if="todoLists.length !== 0">
    <li v-for="item in activeTodoListRef" :key="item.id">

       <input type="checkbox" v-model="item.completed" />
      <input
        @focus="editorTodo(item)"
        @keyup.esc="cancelEditor(item)"
        type="text"
        v-model="item.title"
      />
     
      <a href="javascript:void(0)" @click="delTodo(item)">删除</a>
    </li>
  </ul>
  
  <hr />

  <h2>
    已经完成   <span>{{ completedLen }}</span>
  </h2>

<ul v-if="todoLists.length !== 0">
    <li v-for="item in finishedTodoListRef" :key="item.id">

        <input type="checkbox" v-model="item.completed" />

      <input
        @focus="editorTodo(item)"
        @keyup.esc="cancelEditor(item)"
        type="text"
        v-model="item.title"
      />
    
      <a href="javascript:void(0)" @click="delTodo(item)">删除</a>
    </li>
</ul>

</template>
<script>
import todoList from "./components/todoLists";
import aaa from "./components/newTodo";
import filterTodo from "./components/filterTodo";
import editorTodo from "./components/editorTodo";
import removeTodo from './components/removeTodo'
export default {
  // data() {
  //   return {
  //     a:[]
  //   }
  // },
  setup() {
    let { todoLists } = todoList();
    return {
      todoLists,
      ...aaa(todoLists), //解构运算符  todotitle,addTodo
      ...filterTodo(todoLists),
      ...editorTodo(todoLists),
      ...removeTodo(todoLists)
    };
  },
};
</script>
<style scoped>
a {
  color: #000000;
  text-decoration: none;
  margin: 10px;
}
a:hover {
  color: #f40;
}
a.active {
  color: #f40;
}
</style>